<script setup lang="ts">
import { ref } from 'vue'

const isShow = ref(true)
const toggle = () => {
  // 注意：这里是 = ! 取反后赋值，并不是 != 比较不等于
  isShow.value = !isShow.value
}

const money = ref(100)
const buy = (price: number) => {
  money.value -= price
}

</script>


<template>
  <div id="app">
    <!-- v-on:click 和 @click 等价 -->
    <button @click="toggle()">切换显示隐藏</button>
    <button v-on:click="toggle">切换显示按钮</button>
    <h1 v-show="isShow">黑马程序员</h1>
  </div>


  <div>
    <div class="box">
      <h3>黑马自动售货机</h3>
      <button @click="buy(3)">可乐3元</button>
      <button @click="buy(5)">牛奶5元</button>
      <button @click="buy(10)">咖啡10元</button>
      <button @click="money++">加1</button>
      <button @click="money--">减1</button>
    </div>
    <p>银行卡余额：{{ money }}元</p>
  </div>
</template>

<style>
.box {
  border: 3px solid #000000;
  border-radius: 10px;
  padding: 20px;
  margin: 20px;
  width: 200px;
}

h3 {
  margin: 10px 0 20px 0;
}

p {
  margin: 20px;
}
</style>